
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState===4 && xhr.status===200){
		
	}
}
xhr.open("GET","./zcool.json");
xhr.send(null);

var banner = document.getElementById("banner");
var button = document.getElementsByClassName("button");
var img = document.getElementById("img");
var buttonl = document.getElementById("buttonl");
var buttonr = document.getElementById("buttonr");
var arrimg = {
		1:"https://img.zcool.cn/community/01dbcd5ca176b5a801208f8bb4b49b.jpg@1380w",
		2:"https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w",
		3:"https://img.zcool.cn/community/01e3325ca2bc6aa801208f8bf16c86.jpg@1380w",
		4:"https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w"
	}
//有一个空档期
var i = 1;
var timp = null;
timp = setInterval(function(){
	banner.style.background = "url("+arrimg[i]+")";
	i++;
	if(i>3){
		i = 1;
	}
},2000)
buttonr.addEventListener("click",mover);
function mover(){
	move();
	clearInterval(timp);
}
var j = 1;
function move(){
	banner.style.background = "url("+arrimg[j]+")";
	j++;
	if(j>3){
		j = 1;
	}
}
buttonl.addEventListener("click",movel);
function movel(){
	movele();
	clearInterval(timp);
}
var k = 3;
function movele(){
	banner.style.background = "url("+arrimg[k]+")";
	k--;
	if(j<=0){
		j = 3;
	}
}
banner.onmouseout = function(){
	clearInterval(timp);
	timp = setInterval(function(){
		banner.style.background = "url("+arrimg[i]+")";
		i++;
		if(i>3){
			i = 1;
		}
	},2000)
}
//内容卷动-----卷动了,内容消失了？？？？？
// var titul = document.getElementById("titul");
var tit = document.getElementById("tit");
var tittop = tit.offsetTop;
window.onscroll  = function(){
	var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
	if(scrollTop >= tittop){
		tit.style.position = "fixed";
		tit.style.top = "-64px";
	}else{
		tit.style.position = "static";
	}
}

//点击回到顶部
var back = document.getElementById("back")
back.onclick = function(){
	document.documentElement.scrollTop = 0;
	document.body.scrollTop = 0;
}
// 内容区
var content_s =document.querySelector("content_s");
var content_c =document.getElementById("content_c");
var arrcontent =[
	{
		img1:"https://img.zcool.cn/community/014be25ca325ada801208f8bd577c8.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"下一个潮玩超级IP就是它！",
		p2:"文章-专访-多领域",
		content_b_l:"设计师专访",
		content_b_r:"14小时前"
	},
	{
		img1:"https://img.zcool.cn/community/01f7a15ca35939a8012141685cef4a.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"长草颜团子日常9微信表情",
		p2:"动漫-网络表情",
		content_b_l:"Heyzeem",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/0103e25ca2dca7a801214168e249d6.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"#创意周报 四月 第一周#",
		p2:"特别企划",
		content_b_l:"设计师专访",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/01088c5ca2f91ca801214168596191.jpg",
		p1:"海底捞火锅长卷",
		p2:"插画-商业插画",
		content_b_l:"设计师",
		content_b_r:"12小时前",
	},
	{
		img1:"https://img.zcool.cn/community/019cc65ca1cdeda801208f8b9df023.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"简笔插画2019.3月-2",
		p2:"插画-儿童插画",
		content_b_l:"设计师",
		content_b_r:"21小时前",
	},
	{
		img1:"https://img.zcool.cn/community/014be25ca325ada801208f8bd577c8.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"下一个潮玩超级IP就是它！",
		p2:"文章-专访-多领域",
		content_b_l:"设计师专访",
		content_b_r:"14小时前"
	},
	{
		img1:"https://img.zcool.cn/community/01f7a15ca35939a8012141685cef4a.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"长草颜团子日常9微信表情",
		p2:"动漫-网络表情",
		content_b_l:"Heyzeem",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/0103e25ca2dca7a801214168e249d6.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"#创意周报 四月 第一周#",
		p2:"特别企划",
		content_b_l:"设计师专访",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/01088c5ca2f91ca801214168596191.jpg",
		p1:"海底捞火锅长卷",
		p2:"插画-商业插画",
		content_b_l:"设计师",
		content_b_r:"12小时前",
	},
	{
		img1:"https://img.zcool.cn/community/019cc65ca1cdeda801208f8b9df023.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"简笔插画2019.3月-2",
		p2:"插画-儿童插画",
		content_b_l:"设计师",
		content_b_r:"21小时前",
	},
	{
		img1:"https://img.zcool.cn/community/014be25ca325ada801208f8bd577c8.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"下一个潮玩超级IP就是它！",
		p2:"文章-专访-多领域",
		content_b_l:"设计师专访",
		content_b_r:"14小时前"
	},
	{
		img1:"https://img.zcool.cn/community/01f7a15ca35939a8012141685cef4a.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"长草颜团子日常9微信表情",
		p2:"动漫-网络表情",
		content_b_l:"Heyzeem",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/0103e25ca2dca7a801214168e249d6.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"#创意周报 四月 第一周#",
		p2:"特别企划",
		content_b_l:"设计师专访",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/01088c5ca2f91ca801214168596191.jpg",
		p1:"海底捞火锅长卷",
		p2:"插画-商业插画",
		content_b_l:"设计师",
		content_b_r:"12小时前",
	},
	{
		img1:"https://img.zcool.cn/community/019cc65ca1cdeda801208f8b9df023.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"简笔插画2019.3月-2",
		p2:"插画-儿童插画",
		content_b_l:"设计师",
		content_b_r:"21小时前",
	},
	{
		img1:"https://img.zcool.cn/community/014be25ca325ada801208f8bd577c8.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"下一个潮玩超级IP就是它！",
		p2:"文章-专访-多领域",
		content_b_l:"设计师专访",
		content_b_r:"14小时前"
	},
	{
		img1:"https://img.zcool.cn/community/01f7a15ca35939a8012141685cef4a.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"长草颜团子日常9微信表情",
		p2:"动漫-网络表情",
		content_b_l:"Heyzeem",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/0103e25ca2dca7a801214168e249d6.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"#创意周报 四月 第一周#",
		p2:"特别企划",
		content_b_l:"设计师专访",
		content_b_r:"13小时前",
	},
	{
		img1:"https://img.zcool.cn/community/01088c5ca2f91ca801214168596191.jpg",
		p1:"海底捞火锅长卷",
		p2:"插画-商业插画",
		content_b_l:"设计师",
		content_b_r:"12小时前",
	},
	{
		img1:"https://img.zcool.cn/community/019cc65ca1cdeda801208f8b9df023.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		p1:"简笔插画2019.3月-2",
		p2:"插画-儿童插画",
		content_b_l:"设计师",
		content_b_r:"21小时前",
	},
]

var str = '';
for( var j = 0;j<arrcontent.length;j++){
	str = str+'<div id="content_s">'+
				'<div class="content_t">'+
					'<img src='+arrcontent[j].img1+'>'+
					'<p class="p1">'+arrcontent[j].p1+'</p>'+
					'<p class="p2">'+arrcontent[j].p2+'</p>'+
					'<span class="span1">1.9</span ><span class="span2">48</span><span class="span3">1594</span>'+
				'</div>'+
				'<div class="content_b">'+
					'<p class="content_b_l">'+arrcontent[j].content_b_l+'</p><p class="content_b_r">'+arrcontent[j].content_b_r+'</p>'+
				'</div>'+
			'</div>';
}
content_c.innerHTML = str;

var contents=[
		{
			"title": "出游季承接页来一波~",
			"cover1x": "https://img.zcool.cn/community/01564f5cb048baa801214168e8fd9f.jpg@260w_195h_1c_1e_1o_100sh.jpg",
			"cateStr": "网页",
			"subCateStr": "电商",
			"publishTimeDiffStr": "3天前",
			"username": "阿晶啊"
		},
		{
			"title": "这四只熊变脸比翻书还快……",
			"cover": "https://img.zcool.cn/community/01bf6c5cad9d69a801214168b4ebab.jpg",
			"cover1x": "https://img.zcool.cn/community/01bf6c5cad9d69a801214168b4ebab.jpg@260w_195h_1c_1e_1o_100sh.jpg",
			"cateStr": "资讯",
			"subCateStr": "多领域",
			"username": "打广告的小Z"
		},
		{
			"title": "小可爱",
			"cover1x": "https://img.zcool.cn/community/019c895c98cfd1a801214168c4bcbc.jpg@260w_195h_1c_1e_1o_100sh.jpg",
			"cateStr": "摄影",
			"subCateStr": "人像",
			"publishTimeDiffStr": "20天前",
			"username": "未羊NAUIL"
		},
		{
			"title": "往事",
			"cover1x": "https://img.zcool.cn/community/0192ca5c964913a801208f8b47c218.jpg@260w_195h_1c_1e_1o_100sh.jpg",
			"cateStr": "摄影",
			"subCateStr": "人像",
			"publishTimeDiffStr": "22天前",
			"username": "未羊NAUIL"
		},
		{
		    "title": "福禄酒藏品牌设计",
		    "cover1x": "https://img.zcool.cn/community/01f3555caf0d6fa80121416880cc26.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		    "cateStr": "平面",
		    "subCateStr": "品牌",
		    "publishTimeDiffStr": "3天前",
			"username": "李燃Burn"
		}
]
var but7 = document.getElementById("but7");
var str1 = '';
but7.onclick = function(){
	for( var j = 0;j<contents.length;j++){
		str1 = str1+'<div id="content_s">'+
					'<div class="content_t">'+
						'<img src='+contents[j].cover1x+'>'+
						'<p class="p1">'+contents[j].title+'</p>'+
						'<p class="p2">'+contents[j].cateStr+contents[j].subCateStr+'</p>'+
						'<span class="span1">1.9</span ><span class="span2">48</span><span class="span3">1594</span>'+
					'</div>'+
					'<div class="content_b">'+
						'<p class="content_b_l">'+contents[j].username+'</p><p class="content_b_r">'+contents[j].publishTimeDiffStr+'</p>'+
					'</div>'+
				'</div>';
	}
	content_c.innerHTML += str1;
}


// 点击换一换进行换内容--
var p2 = document.getElementById("p2");
var changePictuer_s = document.getElementsByClassName("changePictuer_s");
var changePictuer = document.getElementById("changePictuer");
var change = [
	{
		img4:"https://img.zcool.cn/community/01acd75ca30f42a801214168705caf.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		tit:"揭秘职业试药人：一周拿命换7万块的人体小白鼠"
	},
	{
		img4:"https://img.zcool.cn/community/01e6675c9ef196a801214168a6ba4b.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		tit:"2015-2019作品集"
	},
	{
		img4:"https://img.zcool.cn/community/01391e5ca09794a801214168b451ea.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		tit:"活动拍摄丨Baseus 倍思"
	},
	{
		img4:"https://img.zcool.cn/community/0177175c9dd183a801214168b4d89a.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		tit:"2018～2019年度 个人作品集"
	},
	{
		img4:"https://img.zcool.cn/community/01035a5c77b887a801203d22af41ee.jpg@260w_195h_1c_1e_1o_100sh.jpg",
		tit:"详情页—海报"
	},
]
// 超链接怎么跳转？？？

// 怎么换呀？？？？？
p2.onclick = function(){
	changePictuer_s = "";
	for(var i = 0;i<changePictuer_s.length;i++){
		changePictuer_s[i] = '<div class="changePictuer_s">'+
			'<img src='+change[i].img4+' >'+
			'<div class="c_p_button">'+
				'<div class="zhong">'+
					'<a href="#">'+change[i].tit+'</a><span></span>'+
				'</div>'+
			'</div>'+
		'</div>';
		changePictuer_s.innerHTML = changePictuer_s[i];
	}
}
var seek = document.getElementById("seek");
var seek_img1 = document.getElementById("seek_img1");
var aa1 = document.getElementById("aa1");
var navul = document.getElementById("navul");
seek_img1.onclick = function(){
	seek.style.display = "none";
	navul.style.visibility = "inherit";
}
// input的状态栏被选中
aa1.onclick = function(){
	seek.style.display = "block";
	navul.style.visibility = "hidden";
	
}

